import { Component, OnInit } from '@angular/core';
import {DashService} from '../dash.service';
import * as echarts from 'echarts';

export class MemberData {
  today = [];
  yestoady = [];
  week = [];
}

@Component({
  selector: 'user-increase',
  templateUrl: 'user-increase.component.html',
  styleUrls: ['user-increase.component.scss'],
  providers: [DashService]
})
export class UserIncreaseComponent implements OnInit {

  memberData = new MemberData;
  timeLine = [];
  echartsData = [{name: '注册量', type: 'line', data: []}];


  constructor(private dashService: DashService) { }

  ngOnInit() {
    this.getMemberData();
    this.getMemberMonthData();
  }

  // 获取用户统计
  getMemberData() {
    this.dashService.getMemberData().subscribe(
      res => {
        this.memberData = res.data;
      }
    )
  }

  // 获取用户月统计
  getMemberMonthData() {
    this.dashService.getMemberMonthData().subscribe(
      res => {
        res.data.every((val, idx, array) => {
          this.timeLine.push(val.date_month);
          this.echartsData[0].data.push(val.num);
          return true;
        });
        this.echarts();
      }
    )
  }

  //echarts折线图配置项
  echarts(){
    let myChart = echarts.init(document.getElementById('echarts-line')),
      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['注册量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeLine
        },
        yAxis: {
          type: 'value'
        },
        series: this.echartsData
      };

    // 绘制图表
    myChart.setOption(option,true);
    window.onresize = myChart.resize;
  };
}
